<template>
  <div class="anbody">

    <!-- 楼主 -->
    <div class="anusercomment" v-for='item in Comment' :key='item.Cid' v-if='item.Cid == cid'>
          <div class="anperson"  >
              <div class="img" v-for='user in Userinfo' :key='user.Uid' v-if='user.Uid == item.User_id'>
                <img :src="require('../static/user/'+user.Upicture)" alt="touxiang" class="antouxiang">
              </div>
              <div class="anname_time">
                <div class="anname" v-for='user in Userinfo' :key='user.Uid' v-if='user.Uid == item.User_id'>{{user.NikeName}}</div>
                <div class="time">{{item.Comtime}}</div>
              </div>
              <!-- <button class="anbtn"><router-link :to="{name:'answertext',params: {id: item.Cid}}" class="btn1" v-for='user in Userinfo' :key='user.Uid' v-if='user.Uid == item.User_id'>answer</router-link></button> -->
              <button class="anbtn" @click="cx">answer</button>
              <button class="anbtn" @click="sc" v-if="userId == item.User_id">delect</button>
          </div>
          <div class="lztext">
            <p class="ancomtext">{{item.ComContent}}</p>    
          </div>
    </div>

    <div class="yhcomment" ref="yhrecm" style="display:none">
        <textarea class="yhtext" v-model="contents"></textarea>
        <div class="yhsend">
          <input type="submit" class="yhsendbtn" @click="send" value="send">
          <!-- <button class="yhsendbtn" @click="send">send</button> -->
        </div>
        <!-- <input type="text" v-model="userId" placeholder="用户ID"> -->
    </div>

    <!-- <answer-text></answer-text> -->

    <!-- 回复 -->
    <div class="recomment" v-for='recom in Comment' :key='recom.Cid' v-if='recom.Father_id == cid'>
      <div class="reperson">
        <span class="img" v-for='reuser in Userinfo' :key='reuser.Uid' v-if='reuser.Uid == recom.User_id'>
          <img :src="require('../static/user/'+reuser.Upicture)" alt="retouxiang" class="retouxiang">
        </span>
        <div class="rename_retime">
          <div class="rename" v-for='reuser in Userinfo' :key='reuser.Uid' v-if='reuser.Uid == recom.User_id'>{{reuser.NikeName}}</div>
          <div class="retime">{{recom.Comtime}}</div>
        </div>
        <button class="anbtn1" @click="sc2" v-if="userId == recom.User_id" v-model="Cid1=recom.Cid">delect</button>
      </div>
      <div class="retext">
        <p class="hftext">{{recom.ComContent}}</p>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios"
// import AnswerText from './AnswerText.vue';

export default {
    data(){
      return{
        // AnswerText,
        cid:this.$route.query.id, 
        // uid:this.$route.query.uid, 
        Comment:[],
        Userinfo: [],
        DFid:this.$route.query.id,	
        contents:'',
        userId:this.$route.query.uid, 
        Cid1:0
        // uid:userId
        // a: document.getElementsByClassName(".yhcomment"),
      }
    },
    mounted(){
      console.log(this.cid);
      console.log(this.uid);
      this.getList();
      // this.judge();
    },
    methods:{
        getList(){
          axios.get("http://localhost:3000/api/comment")
          .then(res =>{
              console.log(res.data);
              this.Comment = res.data.reverse();
              console.log(this.Comment);
          }),
          axios.get("http://localhost:3000/api/userinfo")
          .then(res =>{
              console.log(res.data);
              this.Userinfo = res.data;
              console.log(this.Userinfo);
          })
        },
        send(){
          // console.log(this.userId);
          this.$refs.yhrecm.style.display='none'
          if(this.contents==''){
            this.$message.error('请输入用户内容')
          }else if(this.userId==null){
            this.$message.error('请先登录')
          }else{
            let p = {
              ComContent:this.contents,
              User_id:this.userId,
              Father_id:this.DFid
            }
            console.log(p)
            this.$axios.get('http://localhost:3000/api/addcomment',{params:p}).then(res=>{
              console.log(res)
              if(res.data.code==1){
                this.$message({
                  type:'success',
                  message:'发送成功'
                })
                this.contents = ''
                this.userId = ''
                this.DFid = ''
              }
              else{
                this.$message.error(res.mes)
              }
            })
			    }          
        },
        cx(){
          console.log("hello");
          this.$refs.yhrecm.style.display=''
        },
        // judge(){
        //   console.log(this.uid);
        //   console.log(this.cid);
        //   if(this.uid === ''){
        //     this.$message.error('请先登录')
        //   }
        // }
        sc(){
          var flag=confirm("确定要删除这条内容吗？")
          if(flag){
            console.log('delect'+this.cid);
            let p = this.cid;
            axios({
              method: 'post',
              url: 'http://localhost:3000/api/ancomment/delete',
              data: {
                Cid:this.cid
              }
            })
            .then(res =>{
                console.log(p);
                this.$message({
                type:'success',
                message:'删除成功'
              })
            })
          }
          this.$router.push({name:'comment',})
        },
        sc2(){
          var flag=confirm("确定要删除这条内容吗？")
          if(flag){
            console.log(this.Cid1);
            console.log('delect'+this.Cid1);
            let p = this.Cid1;
            axios({
              method: 'post',
              url: 'http://localhost:3000/api/anzcomment/delete',
              data: {
                Cid:this.Cid1
              }
            })
            .then(res =>{
                console.log(p);
                this.$message({
                type:'success',
                message:'删除成功'
              })
            })
          }
        }

    }
}
</script>

<style scoped>
/* 用户回复模块 */
.yhcomment{
  height:1.9%;
  width: 100%;
  margin: 0 auto;
  border-bottom: 0.001rem solid;
  /* display: none; */
  /* background-color: pink; */
}
.yhtext{
  width: 86%;
  height: 70%;
  margin-left: 7%;
  margin-top: 2%;
  border-radius: 1rem;
  resize: none;
  outline-color: yellow;
  /* margin: auto auto; */
}
.yhsend{
  width: 100%;
  height: 16%;
  /* background-color: black; */
}
.yhsend .yhsendbtn{
  width: 8%;
  height: 80%;
  margin-top: 0.5%;
  margin-right: 7%;
  background-color: yellow;
  border-radius: 0.3rem;
  float: right;
  border: 0rem;
}


/* .yhcomment1{
  height: 3rem;
  width: 1%;
  background-color: black;
} */

.anbody{
  width: 70%;
  height: 800rem;
  background-color: #ffffff;
  margin: 0px auto;
  border-radius: 1rem;
}
/* 楼主 */
.anusercomment{
  height: 2.2%;
  width: 100%;
  margin:auto;
  background-color: #ffffff;
  border-bottom: 0.1rem solid ;
  border-radius: 1.5rem;
}
.anperson{
  width: 95%;
  height: 35%;
  display: flex;
  margin: 0rem auto;
  /* background-color: pink; */
  flex-direction: row;
}
.img{
  width: 10%;
  height: 85%;
  margin-top: 1%;
  /* background-color: black; */
}
.antouxiang{
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  margin: 2% 2%;
  /* float: left; */
}
.anname_time{
  height: 50%;
  width: 67%;
  margin-top: 3%;
  margin-left: 2%;
  /* background-color: antiquewhite; */
}
.anname{
  /* width: 40rem; */
  /* height: 9rem; */
  /* line-height: 9rem; */
  /* margin: 4% 0%; */
  font-size: 1.5rem;
  /* color: #0e151c; */
}
.time{
  margin-top: 0.5%;
}
.anbtn{
  height: 33%;
  width: 13%;
  /* line-height: 30%; */
  font-size: 1.2rem;
  background-color: yellow;
  border: 0rem;
  border-radius: 0.4rem;
  margin-left: 4%;
  margin-top: 3.5%;
}
.lztext{
  width: 100%;
  height: 62%;
  margin-top: 0.9%;
  /* background-color: #ffffff; */
  /* background-color: black; */
}
.ancomtext{
  width: 85%;
  height: 100%;
  /* background-color: black; */
  margin: 0rem auto;
  font-size: 1rem;
  color: #969a9d;
  overflow-y: scroll;
  /* white-space: none; */
  /* scrollbar-width: none; */
  /* -ms-overflow-style:none; */
}

::-webkit-scrollbar{
    display: none;
  }

/* 回复 */
.recomment{
  height: 1.7%;
  width: 85%;
  margin: 0 auto;
  /* background-color: pink; */
  border-bottom: 0.1rem solid;
}
.reperson{
  width: 100%;
  height: 37%;
  margin: 2% 0rem;
  /* background-color: pink; */
  display: flex;
  flex-direction: row;
}
.rename_retime{
  margin-top: 2%;
  /* background-color: aqua; */
}
.rename{
  /* width: 50%; */
  /* height: 100%; */
  font-size: 1.3rem;
  /* background-color: antiquewhite; */
  margin-top: 1%;
  /* line-height: 4rem; */
  /* margin: 3.5% 0.45%; */
}
.retime{
  margin-top: 3%;
  font-size: 0.9rem;
}
.retouxiang{
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  margin: 2%;
}
.retext{
  height:49%;
  width: 90%;
  margin: 0 auto;
  /* background-color: black; */
}
.anbtn1{
  margin-left: 70%;
  height: 33%;
  width: 13%;
  margin-top: 3.5%;
  background-color: yellow;
  border: 0rem;
  border-radius: 0.3rem;
}
.hftext{
  height: 100%;
  width: 100%;
  font-size: 1rem;
  overflow: scroll;
}

@media screen and (max-width:768px){
    /* 手机屏幕 */
    .anbody{
      width: 100%;
      border-top: yellow solid 0.01rem;
      /* background-color: red; */
      /* margin: 0.1rem auto; */
    }
    /* 楼主 */
    .anusercomment{
      height: 2%;
    }
    .anperson{
      width: 95%;
      height: 20%;
      /* background-color: pink; */
    }
    .img{
      width: 18%;
      margin-top: 1%;
      /* background-color: aquamarine; */
    }
    .antouxiang{
      height: 3rem;
      width: 3rem;
    }
    .anname_time{
      height: 100%;
      width: 67%;
      margin-top: 0%;
      margin-left: 0%;
      /* background-color: antiquewhite; */
    }
    .anname{
      margin-top: 2%;
      font-size: 1.2rem;
    }
    .time{
      font-size: 0.8rem;
    }
    .anbtn{
      height: 50%;
      width: 30%;
      /* line-height: 30%; */
      font-size: 1rem;
      background-color: yellow;
      border: 0rem;
      border-radius: 0.4rem;
      margin-left: 4%;
      margin-top: 3.5%;
    }
    .lztext{
      height: 70%;
      margin-top: 0.9%;
      /* background-color: greenyellow; */
      /* background-color: black; */
    }
    .ancomtext{
      font-size: 0.7rem;
    }


    .yhcomment{
      height: 1.5%;
      /* background-color: pink; */
    }
    .yhtext{
      height: 80%;
    }
    .yhsend{
      width: 100%;
      height: 10%;
      /* background-color: black; */
    }
    .yhsend .yhsendbtn{
      width: 15%;
    }


    .reperson{
      height: 25%;
    }
    .rename{
      font-size: 1rem;
      margin-top: 1.5%;
    }
    .retime{
      margin-top: 3%;
      font-size: 0.5rem;
    }
    .retouxiang{
      height: 3rem;
      width: 3rem;
    }
    .retext{
      height:65%;
      width: 95%;
      /* background-color: black; */
    }
    .hftext{
      font-size: 0.5rem;
    }
    .anbtn1{
      margin-left: 30%;
      height: 40%;
      width: 20%;
    } 
}

@media screen and (max-width:992px) and (min-width:768px){
    .anbody{
      width: 100%;
      border-top: yellow solid 0.01rem;
    }
    /* 楼主 */
    .anusercomment{
      height: 2%;
    }
    .anperson{
      width: 95%;
      height: 30%;
      /* background-color: pink; */
    }
    .img{
      width: 10%;
      /* background-color: aquamarine; */
    }
    .antouxiang{
      height: 4rem;
      width: 4rem;
    }
    .anname_time{
      margin-top: 0%;
      margin-left: 0%;
      /* background-color: antiquewhite; */
    }
    .anname{
      margin-top: 2%;
      font-size: 1.5rem;
    }
    .time{
      font-size: 1rem;
    }
    .anbtn{
      height: 50%;
      width: 15%;
      font-size: 1rem;
      background-color: yellow;
      border: 0rem;
      border-radius: 0.4rem;
      margin-left: 4%;
      margin-top: 2.5%;
    }
    .lztext{
      height: 60%;
      /* background-color: greenyellow; */
      /* background-color: black; */
    }
    .ancomtext{
      font-size: 1rem;
    }


    .yhcomment{
      height: 2.3%;
      /* background-color: pink; */
    }
    .yhtext{
      height: 80%;
      /* background-color: pink; */
    }
    .yhsend{
      width: 100%;
      height: 10%;
      /* background-color: black; */
    }
    .yhsend .yhsendbtn{
      margin-top: 0.1%;
      width: 10%;
    }


    .reperson{
      height: 25%;
    }
    .rename{
      font-size: 1rem;
      margin-top: 1.5%;
    }
    .retime{
      margin-top: 3%;
      font-size: 0.5rem;
    }
    .retouxiang{
      height: 3rem;
      width: 3rem;
    }
    .retext{
      height:65%;
      width: 95%;
      /* background-color: black; */
    }
    .hftext{
      font-size: 0.5rem;
    }

}
</style>